<template>
	<view class="column-css" style="height: 100%;">
		<view v-if="paylist.length < 1" class="column-css" style="height: 100%;">
			<view v-if="paylist.length < 1" class="column-css" style="height: 100%; margin: 20rpx;">
				<!-- <image style="width: 460rpx;height: 460rpx;" mode="aspectFit" src="../../static/receiving_card.png"></image>
				<view style="color: #999999;font-size: 28rpx;">当前暂无收款卡</view> -->
				<view class="column-css" style="background: #FFFFFF;padding: 20rpx;flex: 1;">
					<view style="margin: 70rpx 0pt;text-align: center;font-weight: bold;">收款账户开通说明</view>
					<view><text
							style="color: #FFFFFF;">平台</text><text>平台收款账号是联合平安银行合作成立的平台资金监管账户，以“互联网+资金监管”的方式保障司机合法收益安全，维护司机权益。</text>
					</view>
					    <view style="margin-top: 20rpx;">
						<text
							style="color: #FFFFFF;">收款</text><text>收款账号只为保障司机本人收款一致性与安全性,可随时提现到收款人银行卡账号，且不产生任何费用，敬请放心！</text>
					</view>
					<view class="column-css" style="flex: 1;align-items: center;">
						<image style="width: 200rpx;height: 200rpx;margin-top: 50rpx;" mode="aspectFit"
							src="../../static/icon_collection.jpg"></image>
					</view>
					
					<view class="footer">
						<checkbox-group style="display: flex;justify-content: center;align-items: center;" @change="checkboxChange">
							<label>
								<checkbox checked="true" value="checked" style="transform:scale(0.7)"/>
							</label>
							<view class="text">
								<text @click="goClause">我已阅读并同意开立平安银行II类户服务个人信息授权协议</text>
							</view>
						</checkbox-group>
					</view>
					<view v-if="countdown != 0" class="view-deltorder" style="background: #D9D9D9;color: #FFFFFF;"
						@click="onorder()">请仔细阅读({{countdown}})</view>
						
						
					<view v-if="paylist.length < 1 && countdown == 0"
						style="width: 100%; background: #FFFFFF;">
						<view style="width: 100%;height: 20rpx;background: #fff;color: ;"></view>
						<view
							style="padding: 15rpx;text-align: center;color: #FFFFFF;margin: 5rpx 30rpx; background: #2B7CFF;border-radius: 5rpx;"
							@click="addpaymentin">
							+开通收款账号
						</view>
						<!-- <picker style="flex: 1;" @change="bindPickerChange" :value="index" :range="array">
							<view style="padding: 20rpx;text-align: center;color: #FFFFFF;margin: 5rpx 30rpx; background: #2B7CFF;border-radius: 5rpx;">+创建收款账号</view>
						</picker> -->
					</view>
				</view>
			</view>
			<!-- <web-view src="http://159.75.206.134/h5/#/"></web-view> -->
		</view>
		<view v-if="paylist.length > 0">
			<block v-for="(item, index) in paylist" :key="index">
				<view>
					<!-- <view class="row-css" style="justify-content: space-between;align-items: center;" @click="billing(item.payId)">
						<view class="column-css">
							<view style="color: #999999; font-size: 26rpx;">{{ item.bankName }}</view>
							<view style="padding: 10rpx 0;">{{ item.accountNum }}</view>
						</view>
						<image style="width: 28rpx;height: 28rpx;" src="../../static/icon_enter.png"></image>
					</view> -->

					<!-- <view class="row-css" style="justify-content: space-between;align-items: center;">
						<view v-if="item.type == 1" class="column-css" @click="withdraw(item.payId)">
							<view style="color: #999999; font-size: 26rpx;">平安银行互联网账户</view>
							<view style="padding: 10rpx 0;">{{ item.elhSubAccountNo }}</view>
						</view>
						<view v-else class="column-css">
							<view style="color: #999999; font-size: 26rpx;">{{ item.bankName }}</view> -->
					<!-- <view style="padding: 10rpx 0;">{{ accouNo(item.accountNum) }}</view> -->
					<!-- <view style="padding: 10rpx 0;">{{ item.accountNum }}</view>
						</view>
						<view @click="billing(item.payId)">
							查看完整卡号
							<image style="width: 28rpx;height: 28rpx;" src="../../static/icon_enter.png"></image>
						</view>
					</view> -->


					<view class="info-wrap">
						<view class="bg-card">
							<image class="bg-img" :src="img_url + '/icon_bg_image.png'" mode=""></image>
							<view class="item">
								<view class="gray-info"
									style="">
									<image class="bg-info" :src="img_url + '/icon_bg_card.png'" mode=""></image>
									<view class="card">
										<view class="text">平安银行互联网账户</view>
										<view class="number" style="margin: 18rpx 0;">
											{{ formatBank(item.elhSubAccountNo) }}
										</view>

									</view>
									<view class="f-info">
										<view class="text">账户余额（元）</view>
										<view class="flex">
											<text class="number" v-text="isshow == true ? _balance : '****'"></text>
											<text class="btn" @click="showup(item.payId)"
												v-text="isshow == true ? '隐藏余额' : '查看余额'"></text>
										</view>
									</view>

								</view>
							</view>
						</view>

						<view class="item tx-box">
							<view class="" style="display: flex;justify-content: space-between;">
								<view class="title">提现到账账户</view>
								<view class="datbtn" @click="ondetailed()">明细
								<view style="line-height: 48rpx;">
									<image style="width: 28rpx;height: 28rpx;" src="../../static/icon_enter.png"></image>
								</view> 
								 </view>
							</view>
							
							<view class="card-info">
								<view class="flex">
									<image :src="bankIcon" mode=""></image>
									<view class="text-info">
										<view class="name">{{item.bankName}}</view>
										<view class="type">储蓄卡</view>
									</view>
									
									<view class="btn" @click="onwithdraw(item.payId)">提现</view>
								</view>
								<view class="number">{{formatBank(item.accountNum)}}</view>
							</view>

						</view>
					</view>
				</view>
			</block>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="column-css" style="background: #FFFFFF;width: 95%; padding: 20rpx; border-radius: 15rpx;">
				<view class="row-css pop-view-text" style="padding-top: 20rpx;">{{popText}}</view>
				<view class="row-css pop-view-text">验证码已发送您的手机</view>
				<!-- <view class="row-css pop-view-text">{{ userphone }}</view> -->
				<view style="padding: 20rpx;">
					<valid-code v-model="vacode" type="bottom" :maxlength="6" @finish="finish"></valid-code>
				</view>
				<view
					style="color:#00BFFF; margin: 30rpx;font-size: 32rpx; display: flex; flex:1; justify-content: center;align-items: center;"
					@click="sendcode">
					{{ codeText }}
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				img_url: this.$img_url,
				paylist: [
					// {
					// 	account: '二类卡账户',
					// 	accountcard: '621212121212888'
					// },
					// {
					// 	account: '电子卡账户',
					// 	accountcard: '621212121212888'
					// }
				],
				countdown: 3,
				index: 0,
				array: [],

				// 验证码弹框
				isshow: false,
				timer: null,
				time: 60,
				codeText: '重新获取验证码',
				userphone: '138297936528',
				payId: '',
				otpOrderNo: '',
				businessNo: '',
				balance: '',
				_balance: '',
				iscode: 0,
				vacode: '',
				bankIcon: null,


				popText: '查询余额请输入验证码',
				isSign: false, //是否签约
				isFlag: false,
				toggle: false,
				
				checkboxValue: ['checked'],
			};
		},
		methods: {
			goClause() {
				uni.navigateTo({
					url: `../personal/bankClause`
				});
			},
			checkboxChange(e) {
				this.checkboxValue = e.detail.value
				console.log(this.checkboxValue)
			},
			accouNo(accountNo) {
				var reg = /^(\d{4})\d+(\d{4})$/;
				return accountNo.replace(reg, '$1 **** **** $2');
			},
			bindPickerChange: function(e) {
				console.log('dd===========>', e);
				this.index = e.target.value;

				if (this.paylist.length == 1) {
					if (this.paylist[0].type == 1) {
						uni.navigateTo({
							url: `../personal/paymentinformation`
						});
					} else {
						uni.navigateTo({
							url: `../personal/uploadcar`
						});
					}
				} else {
					switch (this.index) {
						case '0':
							uni.navigateTo({
								url: `../personal/uploadcar`
							});
							break;
						case '1':
							uni.navigateTo({
								url: `../personal/paymentinformation`
							});
							break;
					}
				}
				// this.license.axle = this.array[this.index].dicName;
			},
			addpaymentin() {
				// uni.navigateTo({
				// 	url: `../personal/paymentinformation`
				// });
				
				if (this.countdown != 0) {
					uni.showToast({
						title: '请先仔细阅读账户开通说明！',
						icon: 'none'
					});
					return;
				}
				if(!this.checkboxValue.length){
					console.log(this.checkboxValue)
					uni.showModal({
						content: '请先阅读并同意平台开户协议后完成收款账户开通',
						confirmText: '同意开通',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url: `../personal/uploadcar`
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
					return
				}
				uni.navigateTo({
					url: `../personal/uploadcar`
				});
			},
			billing: function(payId) {
				uni.navigateTo({
					url: `../personal/billinginfo?payId=` + payId
				});
			},
			withdraw: function(payId) {
				uni.navigateTo({
					url: `../personal/mypurse?payId=` + payId
				});
			},
			onbilllist() {
				let driverId = uni.getStorageSync(this.DATA_KEY.userInfo).driverId;
				this.wxRequest({
					url: `${this.API}/mini/erLeiHu/getDriverPay`,
					method: 'POST',
					data: {
						driverId: driverId
					},
					title: '加载中...',
					success: res => {
						if (res.data.data.length == 1) {
							if (res.data.data[0].type == 1) {
								this.array = ['关联已有实体银行卡'];
							} else {
								this.array = ['开通平安银行互联网账户(推荐)'];
							}
						} else {
							this.array = ['开通平安银行互联网账户(推荐)', '关联已有实体银行卡'];
						}
						let list = res.data.data;
						this.payId = res.data.data[0].payId
						this.paylist = [];
						for (var i = 0; i < list.length; i++) {
							if (list[i].type == '1') {
								this.paylist.push(list[i]);
							}
						}
						if (!this.paylist.length) {
							uni.stopPullDownRefresh()
						}

						// 查看二类户银行卡信息
						this.wxRequest({
							url: `${this.API}/mini/erLeiHu/getBankInfo`,
							method: 'POST',
							data: {
								payId: this.payId
							},
							title: '查询中...',
							success: res => {
								// this.accountNum = res.data.data.accountNum;
								this.bankIcon = res.data.data.bankIcon;
								// this.bankName = res.data.data.bankName;
								console.log('”顶顶顶顶', res.data.data);
							}
						});

						// 查询用户是否签约
						this.wxRequest({
							url: `${this.API}/mini/erLeiHu/querySigning`,
							method: 'POST',
							data: {
								payId: this.payId,
							},
							// title: '余额查询中...',
							success: res => {
								console.log(res.data)
								if (res.data.code != 0) {
									this.isSign = false
									this.isFlag = false
									setTimeout(() => {
										this.showModal()
									}, 1000)
								} else {
									if (res.data.msg != 0) {
										this.isSign = false
										this.isFlag = false
										setTimeout(() => {
											this.showModal()
										}, 1000)
									} else {
										this.isSign = true
										// 余额免签查询
										this.wxRequest({
											url: `${this.API}/mini/erLeiHu/visaFreeQuery`,
											method: 'POST',
											data: {
												payId: this.payId,
											},
											title: '余额免签查询中...',
											success: res => {
												let num = (res.data.data.availBalance - res.data.data.payFreeze).toFixed(2)
												this._balance = num > 0 ? num : 0
												this.isshow = true
												this.detailBalance = res.data.data.balance
											}
										});
									}
								}
							}
						});
					}
				});
			},



			// 弹框
			showup(id) {
				if (this.isSign) {
					this.isshow = !this.isshow;
				} else {
					this.popText = '查询余额请输入验证码'
					if (!this.isshow) {
						this.wxRequest({
							url: `${this.API}/mini/erLeiHu/getBalanceCode`,
							method: 'POST',
							data: {
								payId: id
							},
							title: '查询中...',
							success: res => {
								if(res.data.code == 0){
									this.otpOrderNo = res.data.data.otpOrderNo;
									this.businessNo = res.data.data.businessNo;
									this.vacode = '';
									this.isFlag = false
									this.$refs.popup.open('center');
								}
							}
						});
					} else {
						this.isshow = !this.isshow;
					}
				}
			},
			onwithdraw(id) {
				let datapurse = {
					category: true,
					payId: id,
					isshow: this.isshow,
					// balance: this._balance
					balance: this.detailBalance
				};
				uni.navigateTo({
					url: '../personal/withdraw?datapurse=' + JSON.stringify(datapurse)
				});
			},
			sendcode() {
				if (this.time == 60) {
					this.timer = setInterval(() => {
						this.codeText = `${this.time}s后重新获取验证码`;
						this.time--;
						if (this.time < 0) {
							this.time = 60;
							this.codeText = '重新获取验证码';
							clearInterval(this.timer);
						}
					}, 1000);
					if (!this.toggle) {
						this.popText = '查询余额请输入验证码',
						// 短信查询余额
						this.wxRequest({
							url: `${this.API}/mini/erLeiHu/getBalanceCode`,
							method: 'POST',
							data: {
								payId: this.payId
							},
							title: '验证码发送中...',
							success: res => {
								if(res.data.code == 0){
									this.$refs.popup.open('center');
									this.otpOrderNo = res.data.data.otpOrderNo;
									this.businessNo = res.data.data.businessNo;
									this.isFlag = false
								}
							}
						});
					} else {
						this.popText = '余额免短信查询授权'
						// 签约授权短信验证码
						this.wxRequest({
							url: `${this.API}/mini/erLeiHu/signingVerificationCode`,
							method: 'POST',
							data: {
								payId: this.payId
							},
							title: '验证码发送中...',
							success: res => {
								if(res.data.code == 0){
									this.$refs.popup.open('center');
									console.log(res.data)
									this.otpOrderNo = res.data.data.otpOrderNo;
									this.businessNo = res.data.data.businessNo;
									this.isFlag = true
								}
							}
						});
					}
				}
			},
			recede() {
				this.timer = setInterval(() => {
					this.codeText = `${this.time}s`;
					this.time--;
					if (this.time < 0) {
						this.time = 60;
						this.codeText = '获取验证码';
						clearInterval(this.timer);
						this.timer = null;
					}
				}, 1000);
			},
			finish: function(e) {
				if (!this.isSign && this.isFlag) {
					this.wxRequest({
						url: `${this.API}/mini/erLeiHu/signing`,
						method: 'POST',
						data: {
							payId: this.payId,
							otpOrderNo: this.otpOrderNo,
							otpValue: e,
							businessNo: this.businessNo
						},
						title: '正在签约中...',
						success: res => {
							console.log(res)
							this.isSign = true;
							this.$refs.popup.close();

							// 余额免签查询
							this.wxRequest({
								url: `${this.API}/mini/erLeiHu/visaFreeQuery`,
								method: 'POST',
								data: {
									payId: this.payId,
								},
								title: '余额免签查询中...',
								success: res => {
									let num = (res.data.data.availBalance - res.data.data.payFreeze).toFixed(2)
									this._balance = num > 0 ? num : 0
									this.isshow = true
									this.detailBalance = res.data.data.balance
								}
							});
						},
						complete: res => {
							// this.iscode = 0;
							this.vacode = '';
						}
					});
				} else {
					if (this.iscode == 0) {
						this.wxRequest({
							url: `${this.API}/mini/erLeiHu/getAccountBalance`,
							method: 'POST',
							data: {
								payId: this.payId,
								otpOrderNo: this.otpOrderNo,
								otpValue: e,
								businessNo: this.businessNo
							},
							title: '余额查询中...',
							success: res => {
								this.isshow = !this.isshow;
								this.toggle = false
								let num = (res.data.data.availBalance - res.data.data.payFreeze).toFixed(2)
								this._balance = num > 0 ? num : 0
								this.$refs.popup.close();
								this.detailBalance = res.data.data.balance
							},
							complete: res => {
								this.iscode = 0;
								this.vacode = '';
							}
						});
						this.iscode = 1;
					}
				}

				console.log('d=======w======>', e);
			},
			formatBank(bank) {
				return bank.replace(/[\s]/g, 'string').replace(/(\d{4})(?=\d)/g, "$1 ")
			},

			showModal() {
				let me = this
				uni.showModal({
					title: '余额免短信查询',
					content: '根据银行监管要求，免短信验证码查询余额需要用户授权；授权后可以直接显示账户余额，请问是否授权？',
					cancelText: '关闭',
					confirmText: '去授权',
					success: function(res) {
						if (res.confirm) {
							// 签约
							me.popText = '余额免短信查询授权'
							me.toggle = true
							setTimeout(() => {
								// me.$refs.popup.open('center');
								me.sendcode()
							}, 1000)
						} else if (res.cancel) {
							me.toggle = false
						}
					},
					complete() {
						// this.toggle = false
					}
				});
			},

			onPullDownRefresh() {
				console.log('refresh');
				this.isshow = false
				this.onbilllist();
				setTimeout(() => {
					uni.stopPullDownRefresh()
				}, 1500)
			},
			
			ondetailed(){
				uni.navigateTo({
					url:"/pages/wallet/bill"
				})
			}
		},
		onLoad() {
			this.onbilllist();
			this.timer = setInterval(() => {
				this.countdown--;
				if (this.countdown < 0) {
					this.countdown = 0;
					clearInterval(this.timer);
				}
			}, 1000);
		},
		onShow() {
			// this.onbilllist();
			this.isshow = false;
		}
	};
</script>

<style lang="scss">
	.intro-wrap {
		.intro-header {
			position: relative;
			z-index: 1;
			width: 100vw;
			height: 460rpx;
			background: #ccc;
			padding: 32rpx;

			.title {
				font-size: 60rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 32rpx;
			}

			.desc {
				font-size: 30rpx;
				font-weight: 400;
				color: #333;
				line-height: 1.5;
			}
		}

		.intro-body {
			position: relative;
			z-index: 2;
			padding: 32rpx;
			margin: -200rpx 32rpx 0;
			background: rgba(255, 255, 255, 0.3400);
			border-radius: 32rpx;
			box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.0400);

			.flex-box {
				padding: 0 50rpx;
				display: flex;
				justify-content: space-between;

				.text {
					flex: 1;
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
					text-align: center;
					line-height: 40rpx;
				}

				.icon {
					width: 60rpx;
					height: 40rpx;
					background: #eee;
				}
			}

			.flex {
				display: flex;

				.flex-item {}
			}
		}
	}


	.info-wrap {
		.bg-card {
			padding: 36rpx 24rpx 12rpx;
			position: relative;
			background: #fff;
		}

		.bg-img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100.2vw;
			height: 368rpx;
			z-index: 1;
		}

		.item {
			position: relative;
			z-index: 2;
			margin-bottom: 30rpx;

			.gray-info {
				border-radius: 10rpx;
				padding: 24rpx 0 48rpx 24rpx;
				position: relative;
				.bg-info{
					width: 100%;
					height: 100%;
					position: absolute;
					z-index: 1;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
				}
				.card {
					color: #333;
					margin-left: 36rpx;
					position: relative;
					z-index: 2;
				}

				.text {
					font-size: 30rpx;
					line-height: 44rpx;
				}

				.number {
					font-size: 44rpx;
					font-weight: 500;
				}

				.f-info {
					position: relative;
					z-index: 2;
					color: #8C614B;
					padding-top: 24rpx;
					margin-left: 36rpx;
					border-top: 2rpx dashed #8C614B;
				}

				.flex {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				.btn {
					border-radius: 12rpx;
					padding: 12rpx 24rpx;
					font-size: 32rpx;
					border-radius: 20px;
					border: 1px solid #8C614B;
					font-weight: 400;
					color: #8C614B;
					margin-right: 24rpx;
				}
			}

			.card-info {
				margin: 24rpx 0;
				padding: 24rpx;
				color: #000;
				box-shadow: 0 0 20rpx 8rpx rgba(0, 0, 0, 0.04);
				border-radius: 8rpx;

				.flex {
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 70rpx;
						height: 70rpx;
					}

					.text-info {
						flex: 1;
						margin: 0 24rpx;

						.name {
							font-size: 28rpx;
						}

						.type {
							font-size: 22rpx;
							margin-top: 4rpx;
						}
					}

					.btn {
						color: #8C614B;
						padding: 12rpx 48rpx;
						font-size: 32rpx;
						background: #FFFFFF;
						box-shadow: 0 0 20rpx 0 rgba(140, 97, 75, 0.16);
						border-radius: 34rpx;
					}
				}

				.number {
					font-size: 44rpx;
					font-weight: 500;
					margin-top: 24rpx;
				}
			}
		}

		.tx-box {
			background: #fff;
			margin-top: 24rpx;
			padding: 24rpx;

			.title {
				color: #333;
				font-size: 34rpx;
				font-weight: 500;
				padding-left: 24rpx;
				border-left: 12rpx solid #F6DBB5;
			}
			.datbtn{
				color: #333;
				font-size: 28rpx;
				font-weight: 500;
				display: flex;
			}
		}

	}

	page {
		height: 100%;
	}

	.row-css {
		display: flex;
		flex-direction: row;
	}

	.column-css {
		display: flex;
		flex-direction: column;
	}

	.view-deltorder {
		text-align: center;
		margin: 10rpx 30rpx;
		padding: 15rpx 0;
		height: auto;
		color: #007AFF;
		border-radius: 8rpx;
	}

	.postfix {
		position: fixed;
		background: #ffffff;
		border-radius: 10rpx;
		left: 80rpx;
		right: 80rpx;
		top: 120rpx;
		height: 400rpx;
	}

	.mini-btn {
		width: 100%;
		background: #e04b28;
		font-size: 28rpx;
		padding: 10rpx 0;
		margin: 0 20rpx;
	}

	.pop-view-text {
		padding-top: 20rpx;
		justify-content: center;
		font-size: 32rpx;
		color: #575858;
		text-align: center;
	}
	.footer {
		margin-top: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		box-sizing: border-box;
	
		.text {
			font-size: 22rpx;
			font-weight: 400;
			color: #000000;
	
			text {
				color: #00468C;
			}
		}
	}
</style>
